A watermark refers to text or a graphic that appears behind text. It shows the real value putting in textbox to tell the user.
How we implement the watermark text
Step 1: Firstly we download the file “jquery-1.4.4.min.js” fromhttp://docs.jquery.com/Downloading_jQuery. And include in head section.
Step2: Using this css for displaying watermark text
.watermarkText
{
color: silver;
font-style: italic;
}
Step3: Using Java Script code in head section as
<script>
$(document).ready(function() {
// Define what happens when the textbox comes under focus
// Remove the watermark class and clear the box
$("#txtName").focus(function() {
$(this).filter(function() {
// We only want this to apply if there's not
// something actually entered
return $(this).val() == "" || $(this).val() == "User Name"
}).removeClass("watermarkText ").val("");
});
// Define what happens when the textbox loses focus
// Add the watermark class and default text
$("#txtName").blur(function() {
$(this).filter(function() {
// We only want this to apply if there's not
// something actually entered
return $(this).val() == ""
}).addClass("watermarkText").val("User Name");
});
});
</script>
Step4: Using textbox control within form tag
<asp:TextBox ID="txtName" runat="server" CssClass="watermarkText" value="User Name"></asp:TextBox>
Check this simple code for using watermark functionality in textbox.
Anonymous User
02-Mar-2019Thank You for the post.
Sunil Singh
30-Jun-2017Thanks for sharing informative post.